// test/pages/check_ticket_order/check_ticket_order.js
const request = require("../../../utils/api.js");
// const qrcode = require("../../../utils/qrcode.js");
import QRCode from "../../../utils/qrcode.js"
import drawQrcode from "../../../utils/weapp-qrcode.js"
const urlList = [];
const codeH = 0;
const codeW = 0;
Page({
    /**
     * 页面的初始数据
     */
    data: {
        codeH: 0,
        codeW: 0,
        id: "",
        imgUrl: [],
        dataList: []
    },

    async getDataList(order_no) {
        try {
            const res = await request.fetchApi("Ticket/ticket_order", {
                order_no
            })
            wx.stopPullDownRefresh()
            this.setData({
                dataList: res
            })
            this.getCodeInfo()
        } catch (error) {
            console.log(error);
        }

    },
    getCodeInfo() {
        const query = wx.createSelectorQuery()
        query.select(".img").boundingClientRect();
        query.exec(res => {
            console.log(res);
            this.setData({
                codeH: res[0].height,
                codeW: res[0].width
            })
            // this.creatQrcode("http://www.baidu.com", "myQrcode", this.data.codeW, this.data.codeH);
            this.data.dataList[0].code.forEach(item => {
                this.creatQrcode(item.id, "myQrcode", this.data.codeW, this.data.codeH);
            })

        })
    },
    preview(e) {
        wx.previewImage({
            urls: this.data.imgUrl,
            success: () => {
                // console.log(111111);
            },
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    // createCodeImage(id) {
    //     const qrcode = new QRCode('myQrcode', {
    //         text: `https://edu.laigl.com/api/Ticket/check_t?id=${id}`,
    //         padding: 12,
    //         width: this.data.codeW ,
    //         height: this.data.codeH,
    //         // width: 142 ,
    //         // height: 142,
    //         colorDark: "#000",
    //         colorLight: "white",
    //         correctLevel: 0,
    //         callback:(e)=>{
    //             console.log(e);
    //         }
    //     });
    //     qrcode.exportImage((res) => {
    //         console.log(res);
    //         urlList.push(res)
    //         this.setData({
    //             imgUrl: urlList
    //         })
    //     })
    // },
    createCodeImage(id) {
        drawQrcode({
            width: this.data.codeW,
            height: this.data.codeH,
            canvasId: 'myQrcode',
            // ctx: wx.createCanvasContext('myQrcode'),
            text: `https://edu.laigl.com/api/Ticket/check_t?id=${id}`,
            // v1.0.0+版本支持在二维码上绘制图片
            // image: {
            //   imageResource: '../../images/icon.png',
            //   dx: 70,
            //   dy: 70,
            //   dWidth: 60,
            //   dHeight: 60
            // }
            callback: () => {
                wx.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: this.data.codeW,
                    height: this.data.codeH,
                    destWidth: this.data.codeW,
                    destHeight: this.data.codeH,
                    canvasId: 'myQrcode',
                    fileType: "jpg",
                    success: (res) => {
                        // console.log(res.tempFilePath);
                        urlList.push(res.tempFilePath)
                        this.setData({
                            imgUrl: urlList
                        })
                    }
                });

            }
        })





        // qrcode.exportImage((res) => {
        //     console.log(res);
        //     urlList.push(res)
        //     this.setData({
        //         imgUrl: urlList
        //     })
        // })
    },
    canvasToTempImage: function (canvasId) {
        let that = this;
        wx.canvasToTempFilePath({
            canvasId, // 这里canvasId即之前创建的canvas-id
            success: function (res) {
                // let tempFilePath = res.tempFilePath;
                // console.log(tempFilePath);
                // that.setData({       // 如果采用mpvue,即 this.imagePath = tempFilePath
                //   imagePath:tempFilePath,
                // });
                urlList.push(res.tempFilePath)
                that.setData({
                    imgUrl: urlList
                })
            },
            fail: function (res) {
                console.log(res);
            }
        });
    },
    creatQrcode(content, canvasId, cavW, cavH) {
        //调用插件中的draw方法，绘制二维码图片
        //this.canvasToTempImage 为绘制完成的回调函数，可根据自己的业务添加
        QRCode.api.draw(`https://edu.laigl.com/api/Ticket/check_t?id=${content}`, canvasId, cavW, cavH, this, this.canvasToTempImage);
    },
    onLoad: function (options) {
        this.setData({
            id: options.order_id
        })
        this.getDataList(options.order_id)
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.getDataList(this.data.id)
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})